import React,{ Component } from 'react';
import { Icon } from 'antd';
import styles from './index.less';
class BackTop extends Component{
    constructor(props){
        super(props);
        this.state ={ show:false }
        this.handleScroll =this.handleScroll.bind(this);
    }
    BackTop(){
        window.scrollTo(0,0)
    }
    handleScroll(){
        let scrollTop = document.body.scrollTop;
        if(scrollTop >500){
            this.setState({
                show:true
            })
        }else{
            this.setState({
                show:false
            })
        }
    }
    render() {
        // console.log('this.state.show',this.state.show);
        return(
            <div className={ this.state.show ? styles.backTopShow : styles.backTopHidden } onClick={ this.BackTop }><Icon type="up" /></div> 
         )
        } 
    bindEvents(){
        window.addEventListener('scroll',this.handleScroll)
    }
    componentDidMount(){
        this.bindEvents()
    }
    componentWillUnmount(){
        window.removeEventListener('scroll',this.handleScroll,false)
    }
}

export default BackTop;